import React from 'react';
import {
    View,
    Text,
    TextInput,
    StyleSheet,
    TouchableOpacity,
} from 'react-native';
import { Icon } from '../../../component'
import config from '../../../config';

const styles = StyleSheet.create({
    container: {
        marginVertical: 8,
        marginHorizontal: 12,
        height: 32,
        borderRadius: 4,
        backgroundColor: '#fff',
        flexDirection: 'row',
        alignItems: 'center',
    },
    textContainer: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    text: {
        fontSize: config.defaultFontSize,
        color: config.disabledColor,
        marginLeft: 4
    },
});

const Search = ({ isEditable = true, value = '', onPress, onChangeText }) => {
    return (
        <TouchableOpacity
            activeOpacity={1}
            onPress={() => {
                if (isEditable == false) {
                    onPress && onPress()
                }
            }}
            style={[styles.container, { justifyContent: value && value.length > 0 ? 'flex-start' : 'center' }]}>

            {isEditable ?
                <View style={[styles.textContainer, { paddingHorizontal: 8, }]}>
                    <Icon color={config.disabledColor} name={'icon_search'} size={config.middleFontSize} />
                    <TextInput
                        multiline={false}
                        onChangeText={onChangeText}
                        placeholder={'搜索'}
                        style={[styles.text, { flex: 1, marginRight: 4, color: '#000', }]}
                        value={value} />
                </View>
                : <View style={styles.textContainer}>
                    <Icon color={config.disabledColor} name={'icon_search'} size={config.middleFontSize} />
                    <Text style={styles.text}>搜索</Text>
                </View>}

        </TouchableOpacity>
    )
}

export default Search